import { DeferredDemo } from '@/components/demo/deferreddemo';
import { AppCode } from '@/components/doc/app.code';
import { Code } from '@/domain/code';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
import { TreeTableModule } from 'primeng/treetable';

@Component({
    selector: 'column-group-doc',
    standalone: true,
    imports: [TreeTableModule, DeferredDemo, AppCode],
    template: `
        <div class="card">
            <p-deferred-demo (load)="loadDemoData()">
                <p-treetable [value]="sales" [scrollable]="true" [tableStyle]="{ 'min-width': '50rem' }">
                    <ng-template #header>
                        <tr>
                            <th rowspan="3">Brand</th>
                            <th colspan="4">Sale Rate</th>
                        </tr>
                        <tr>
                            <th colspan="2">Sales</th>
                            <th colspan="2">Profits</th>
                        </tr>
                        <tr>
                            <th>Last Year</th>
                            <th>This Year</th>
                            <th>Last Year</th>
                            <th>This Year</th>
                        </tr>
                    </ng-template>
                    <ng-template #body let-rowNode let-rowData="rowData">
                        <tr [ttRow]="rowNode">
                            <td>
                                <div class="flex items-center gap-2">
                                    <p-treetable-toggler [rowNode]="rowNode" />
                                    <span>{{ rowData.brand }}</span>
                                </div>
                            </td>
                            <td>{{ rowData.lastYearSale }}</td>
                            <td>{{ rowData.thisYearSale }}</td>
                            <td>{{ rowData.lastYearProfit }}</td>
                            <td>{{ rowData.thisYearProfit }}</td>
                        </tr>
                    </ng-template>
                    <ng-template #footer>
                        <tr>
                            <td colspan="3">Totals</td>
                            <td>$3,283,772</td>
                            <td>$2,126,925</td>
                        </tr>
                    </ng-template>
                </p-treetable>
            </p-deferred-demo>
        </div>
        <app-code [code]="code" selector="tree-table-column-group-demo"></app-code>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnGroupDoc {
    sales!: TreeNode[];

    loadDemoData() {
        this.sales = [
            {
                data: { brand: 'Bliss', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342' },
                children: [
                    {
                        data: {
                            brand: 'Product A',
                            lastYearSale: '25%',
                            thisYearSale: '20%',
                            lastYearProfit: '$34,406.00',
                            thisYearProfit: '$23,342'
                        },
                        children: [
                            {
                                data: {
                                    brand: 'Product A-1',
                                    lastYearSale: '20%',
                                    thisYearSale: '10%',
                                    lastYearProfit: '$24,406.00',
                                    thisYearProfit: '$13,342'
                                }
                            },
                            {
                                data: {
                                    brand: 'Product A-2',
                                    lastYearSale: '5%',
                                    thisYearSale: '10%',
                                    lastYearProfit: '$10,000.00',
                                    thisYearProfit: '$10,000'
                                }
                            }
                        ]
                    },
                    {
                        data: {
                            brand: 'Product B',
                            lastYearSale: '26%',
                            thisYearSale: '20%',
                            lastYearProfit: '$24,000.00',
                            thisYearProfit: '$23,000'
                        }
                    }
                ]
            },
            {
                data: { brand: 'Fate', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' },
                children: [
                    {
                        data: {
                            brand: 'Product X',
                            lastYearSale: '50%',
                            thisYearSale: '40%',
                            lastYearProfit: '$223,132',
                            thisYearProfit: '$156,061'
                        }
                    },
                    {
                        data: {
                            brand: 'Product Y',
                            lastYearSale: '33%',
                            thisYearSale: '56%',
                            lastYearProfit: '$200,000',
                            thisYearProfit: '$156,061'
                        }
                    }
                ]
            },
            {
                data: { brand: 'Ruby', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' },
                children: [
                    {
                        data: {
                            brand: 'Product M',
                            lastYearSale: '18%',
                            thisYearSale: '2%',
                            lastYearProfit: '$10,300',
                            thisYearProfit: '$5,500'
                        }
                    },
                    {
                        data: {
                            brand: 'Product N',
                            lastYearSale: '20%',
                            thisYearSale: '3%',
                            lastYearProfit: '$2,021',
                            thisYearProfit: '$3,000'
                        }
                    }
                ]
            },
            {
                data: { brand: 'Sky', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323' },
                children: [
                    {
                        data: {
                            brand: 'Product P',
                            lastYearSale: '20%',
                            thisYearSale: '16%',
                            lastYearProfit: '$345,232',
                            thisYearProfit: '$350,000'
                        }
                    },
                    {
                        data: {
                            brand: 'Product R',
                            lastYearSale: '29%',
                            thisYearSale: '6%',
                            lastYearProfit: '$400,009',
                            thisYearProfit: '$300,323'
                        }
                    }
                ]
            },
            {
                data: { brand: 'Comfort', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' },
                children: [
                    {
                        data: {
                            brand: 'Product S',
                            lastYearSale: '10%',
                            thisYearSale: '40%',
                            lastYearProfit: '$243,242',
                            thisYearProfit: '$100,000'
                        }
                    },
                    {
                        data: {
                            brand: 'Product T',
                            lastYearSale: '7%',
                            thisYearSale: '39%',
                            lastYearProfit: '$400,00',
                            thisYearProfit: '$400,332'
                        }
                    }
                ]
            },
            {
                data: { brand: 'Merit', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' },
                children: [
                    {
                        data: {
                            brand: 'Product L',
                            lastYearSale: '20%',
                            thisYearSale: '40%',
                            lastYearProfit: '$121,132',
                            thisYearProfit: '$100,000'
                        }
                    },
                    {
                        data: {
                            brand: 'Product G',
                            lastYearSale: '32%',
                            thisYearSale: '25%',
                            lastYearProfit: '$300,000',
                            thisYearProfit: '$50,005'
                        }
                    }
                ]
            },
            {
                data: { brand: 'Violet', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' },
                children: [
                    {
                        data: {
                            brand: 'Product SH1',
                            lastYearSale: '30%',
                            thisYearSale: '6%',
                            lastYearProfit: '$101,211',
                            thisYearProfit: '$30,214'
                        }
                    },
                    {
                        data: {
                            brand: 'Product SH2',
                            lastYearSale: '52%',
                            thisYearSale: '6%',
                            lastYearProfit: '$30,000',
                            thisYearProfit: '$70,000'
                        }
                    }
                ]
            },
            {
                data: { brand: 'Dulce', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' },
                children: [
                    {
                        data: {
                            brand: 'Product PN1',
                            lastYearSale: '22%',
                            thisYearSale: '25%',
                            lastYearProfit: '$33,221',
                            thisYearProfit: '$20,000'
                        }
                    },
                    {
                        data: {
                            brand: 'Product PN2',
                            lastYearSale: '22%',
                            thisYearSale: '25%',
                            lastYearProfit: '$33,221',
                            thisYearProfit: '$33,322'
                        }
                    }
                ]
            },
            {
                data: { brand: 'Solace', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' },
                children: [
                    {
                        data: {
                            brand: 'Product HT1',
                            lastYearSale: '60%',
                            thisYearSale: '36%',
                            lastYearProfit: '$465,000',
                            thisYearProfit: '$150,653'
                        }
                    },
                    {
                        data: {
                            brand: 'Product HT2',
                            lastYearSale: '30%',
                            thisYearSale: '20%',
                            lastYearProfit: '$300,442',
                            thisYearProfit: '$145,579'
                        }
                    }
                ]
            },
            {
                data: { brand: 'Essence', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' },
                children: [
                    {
                        data: {
                            brand: 'Product TS1',
                            lastYearSale: '50%',
                            thisYearSale: '34%',
                            lastYearProfit: '$11,000',
                            thisYearProfit: '$8,562'
                        }
                    },
                    {
                        data: {
                            brand: 'Product TS2',
                            lastYearSale: '25%',
                            thisYearSale: '20%',
                            lastYearProfit: '$11,212',
                            thisYearProfit: '$3,971'
                        }
                    }
                ]
            }
        ];
    }
    code: Code = {
        basic: `<p-treetable [value]="sales" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template #header>
        <tr>
            <th rowspan="3">Brand</th>
            <th colspan="4">Sale Rate</th>
        </tr>
        <tr>
            <th colspan="2">Sales</th>
            <th colspan="2">Profits</th>
        </tr>
        <tr>
            <th>Last Year</th>
            <th>This Year</th>
            <th>Last Year</th>
            <th>This Year</th>
        </tr>
    </ng-template>
    <ng-template #body let-rowNode let-rowData="rowData">
        <tr>
            <td>
                <div class="flex items-center gap-2">
                    <p-treetable-toggler [rowNode]="rowNode" />
                    <span>{{ rowData.brand }}</span>
                </div>
            </td>
            <td>{{ rowData.lastYearSale }}</td>
            <td>{{ rowData.thisYearSale }}</td>
            <td>{{ rowData.lastYearProfit }}</td>
            <td>{{ rowData.thisYearProfit }}</td>
        </tr>
    </ng-template>
    <ng-template #footer>
        <tr>
            <td colspan="3">Totals</td>
            <td>$3,283,772</td>
            <td>$2,126,925</td>
        </tr>
    </ng-template>
</p-treetable>`,

        html: `<div class="card">
    <p-treetable [value]="sales" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
        <ng-template #header>
            <tr>
                <th rowspan="3">Brand</th>
                <th colspan="4">Sale Rate</th>
            </tr>
            <tr>
                <th colspan="2">Sales</th>
                <th colspan="2">Profits</th>
            </tr>
            <tr>
                <th>Last Year</th>
                <th>This Year</th>
                <th>Last Year</th>
                <th>This Year</th>
            </tr>
        </ng-template>
        <ng-template #body let-rowNode let-rowData="rowData">
            <tr [ttRow]="rowNode">
                <td>
                    <div class="flex items-center gap-2">
                        <p-treetable-toggler [rowNode]="rowNode" />
                        <span>{{ rowData.brand }}</span>
                    </div>
                </td>
                <td>{{ rowData.lastYearSale }}</td>
                <td>{{ rowData.thisYearSale }}</td>
                <td>{{ rowData.lastYearProfit }}</td>
                <td>{{ rowData.thisYearProfit }}</td>
            </tr>
        </ng-template>
        <ng-template #footer>
            <tr>
                <td colspan="3">Totals</td>
                <td>$3,283,772</td>
                <td>$2,126,925</td>
            </tr>
        </ng-template>
    </p-treetable>
</div>`,

        typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
import { TreeTableModule } from 'primeng/treetable';

@Component({
    selector: 'tree-table-column-group-demo',
    templateUrl: './tree-table-column-group-demo.html',
    standalone: true,
    imports: [TreeTableModule]
})
export class TreeTableColumnGroupDemo implements OnInit {
    sales!: TreeNode[];

    ngOnInit() {
        this.sales = [
            {
                data: { brand: 'Bliss', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342' },
                children: [
                    {
                        data: { brand: 'Product A', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$34,406.00', thisYearProfit: '$23,342' },
                        children: [
                            {
                                data: { brand: 'Product A-1', lastYearSale: '20%', thisYearSale: '10%', lastYearProfit: '$24,406.00', thisYearProfit: '$13,342' }
                            },
                            {
                                data: { brand: 'Product A-2', lastYearSale: '5%', thisYearSale: '10%', lastYearProfit: '$10,000.00', thisYearProfit: '$10,000' }
                            }
                        ]
                    },
                    {
                        data: { brand: 'Product B', lastYearSale: '26%', thisYearSale: '20%', lastYearProfit: '$24,000.00', thisYearProfit: '$23,000' }
                    }
                ]
            },
            {
                data: { brand: 'Fate', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' },
                children: [
                    {
                        data: { brand: 'Product X', lastYearSale: '50%', thisYearSale: '40%', lastYearProfit: '$223,132', thisYearProfit: '$156,061' }
                    },
                    {
                        data: { brand: 'Product Y', lastYearSale: '33%', thisYearSale: '56%', lastYearProfit: '$200,000', thisYearProfit: '$156,061' }
                    }
                ]
            },
            {
                data: { brand: 'Ruby', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' },
                children: [
                    {
                        data: { brand: 'Product M', lastYearSale: '18%', thisYearSale: '2%', lastYearProfit: '$10,300', thisYearProfit: '$5,500' }
                    },
                    {
                        data: { brand: 'Product N', lastYearSale: '20%', thisYearSale: '3%', lastYearProfit: '$2,021', thisYearProfit: '$3,000' }
                    }
                ]
            },
            {
                data: { brand: 'Sky', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323' },
                children: [
                    {
                        data: { brand: 'Product P', lastYearSale: '20%', thisYearSale: '16%', lastYearProfit: '$345,232', thisYearProfit: '$350,000' }
                    },
                    {
                        data: { brand: 'Product R', lastYearSale: '29%', thisYearSale: '6%', lastYearProfit: '$400,009', thisYearProfit: '$300,323' }
                    }
                ]
            },
            {
                data: { brand: 'Comfort', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' },
                children: [
                    {
                        data: { brand: 'Product S', lastYearSale: '10%', thisYearSale: '40%', lastYearProfit: '$243,242', thisYearProfit: '$100,000' }
                    },
                    {
                        data: { brand: 'Product T', lastYearSale: '7%', thisYearSale: '39%', lastYearProfit: '$400,00', thisYearProfit: '$400,332' }
                    }
                ]
            },
            {
                data: { brand: 'Merit', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' },
                children: [
                    {
                        data: { brand: 'Product L', lastYearSale: '20%', thisYearSale: '40%', lastYearProfit: '$121,132', thisYearProfit: '$100,000' }
                    },
                    {
                        data: { brand: 'Product G', lastYearSale: '32%', thisYearSale: '25%', lastYearProfit: '$300,000', thisYearProfit: '$50,005' }
                    }
                ]
            },
            {
                data: { brand: 'Violet', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' },
                children: [
                    {
                        data: { brand: 'Product SH1', lastYearSale: '30%', thisYearSale: '6%', lastYearProfit: '$101,211', thisYearProfit: '$30,214' }
                    },
                    {
                        data: { brand: 'Product SH2', lastYearSale: '52%', thisYearSale: '6%', lastYearProfit: '$30,000', thisYearProfit: '$70,000' }
                    }
                ]
            },
            {
                data: { brand: 'Dulce', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' },
                children: [
                    {
                        data: { brand: 'Product PN1', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$20,000' }
                    },
                    {
                        data: { brand: 'Product PN2', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$33,322' }
                    }
                ]
            },
            {
                data: { brand: 'Solace', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' },
                children: [
                    {
                        data: { brand: 'Product HT1', lastYearSale: '60%', thisYearSale: '36%', lastYearProfit: '$465,000', thisYearProfit: '$150,653' }
                    },
                    {
                        data: { brand: 'Product HT2', lastYearSale: '30%', thisYearSale: '20%', lastYearProfit: '$300,442', thisYearProfit: '$145,579' }
                    }
                ]
            },
            {
                data: { brand: 'Essence', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' },
                children: [
                    {
                        data: { brand: 'Product TS1', lastYearSale: '50%', thisYearSale: '34%', lastYearProfit: '$11,000', thisYearProfit: '$8,562' }
                    },
                    {
                        data: { brand: 'Product TS2', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$11,212', thisYearProfit: '$3,971' }
                    }
                ]
            }
        ];
    }
}`
    };
}
